<template>
    <div class="trans">
        <div class="trans-box">
            <div :class="['trans-item',index === list.length - 1 ? '' : 'trans-gap']" v-for="(p,index) in list" :key="index">
                <div class="show-img">
                    <img :src="publicUrl(p.url)" />
                </div>
                <div class="show-t">
                    {{ transl(p.title) }}
                </div>
            </div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { reactive } from "vue"
import type { Introduce } from "@/api/interface/site" 
import { publicUrl } from "@/utils/index"
import { LangStore } from "@/stores/modules/lang"
const { transl } = LangStore()
const list = reactive<Introduce[]>([
    {title:"网红江边打卡",url:"/img/daka1.jpg"},
    {title:"草坪露营",url:"/img/daka2.jpg"},
    {title:"自助美食",url:"/img/daka3.jpg"},
]) 
</script>
    
<style scoped lang="scss">
@import "./index.scss";
</style>